<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/clear.css">
    <link rel="stylesheet" href="/static/css/cinemadatas.css">
    <script src="/static/js/jquery-1.12.2.js"></script>

    <title>影院详情</title>
    <link rel="icon" href="/static/images/title-lolg.png">

    <style>
        .movieHidden {
            display: none;
        }

        .movieShow {
            display: block;
        }
    </style>

</head>

<body>
<div th:replace="/common/head::#header"></div>
<!-- 页面主体 -->
<div class="movie-top">
    <div class="movie-banner">
        <div class="movie-img">
            <img id="cinemaimg" th:src="${movieTheatre.previewUrl}" alt="">
        </div>
        <div class="movie-data">
            <div class="movie-name">
                <h2 class="name" id="cinemaname" style="font-size: 25px;width: 100%">
                    [[${movieTheatre.name}]]（[[${movieTheatre.brandName}]]）</h2>
                <h2 class="othername" id="adress" th:text="${movieTheatre.address}">新都区斑竹园镇中利路169号北欧商业广场4号楼4楼</h2>
                <p class="kind" id="phonenum" th:text="${movieTheatre.phone}">082-55551455</p>
            </div>
            <div class="movie-btn">
                <p>影院服务：</p>
                <p th:each="movieTheatreServerVo:${movieTheatreServerVoList}" style="font-size: 12px">
                    <span style="font-size: 10px" th:text="${movieTheatreServerVo.label}"><span></span>改签</span>
                    <span style="font-size: 10px" th:text="${movieTheatreServerVo.server}">未取票用户放映前60分钟可改签</span>
                </p>
            </div>
            <div class="map">
                <img src="/static/images/map.png" alt="">
            </div>
        </div>
    </div>
</div>
<div class="mian">
    <div class="contents">
        <div class="list_movie">
            <ul id="moviePreviewImage">
                <li th:each="cinemasDetailShowVo,iterSta:${cinemasDetailShowVos}"
                    th:class="${iterSta.index==0?'activeimg':''}">
                    <img th:src="${cinemasDetailShowVo.cinemasMovieVo.getPreviewUrl()}">
                </li>
            </ul>
            <div class="contor">
                <i class="previ">
                    <img src="/static/images/left.png" alt="">
                </i>
                <i class="next">
                    <img src="/static/images/right.png" alt="">
                </i>
            </div>
        </div>

        <!--电影一-->
        <div th:class="${iterSta.index==0?'movieShowTable movieHidden movieShow':'movieShowTable movieHidden'}"
             th:each="cinemasDetailShowVo,iterSta:${cinemasDetailShowVos}">
            <div class="nowmovie">
                <div class="pf">
                    <h3 id="moviename" th:text="${cinemasDetailShowVo.cinemasMovieVo.name}"></h3>
                    <p>
                        <span id="movienum" th:text="${cinemasDetailShowVo.cinemasMovieVo.grade}">8.4</span>
                        <span>分</span>
                    </p>
                </div>
                <div class="xq" style="width: 500px">
                    <div>
                        <span>时长 :</span>
                        <span th:text="${cinemasDetailShowVo.cinemasMovieVo.duration+'分钟'}">120分钟</span>
                    </div>
                    <div>
                        <span>类型 :</span>
                        <span id="moviekind" th:each="type:${cinemasDetailShowVo.cinemasMovieVo.actorNames}"
                              th:text="${type+' '}">动画</span>
                    </div>
                    <div>
                        <span>主演 :</span>
                        <span id="moviestar" th:each="actor:${cinemasDetailShowVo.cinemasMovieVo.types
                        }"
                              th:text="${actor+' '}">卫宫士郎,间桐樱,远坂凛</span>
                    </div>
                </div>
            </div>
            <div class="date_list">
                <ul class="movieShowDate">
                    <span>观影时间:</span>
                    <li th:class="${index.index==0?'activeli':''}"
                        th:each="dateShow,index:${cinemasDetailShowVo.dateShow}" th:text="${dateShow}">今天 7月15日
                    </li>
                </ul>
            </div>

            <!--遍历放映-->
            <div th:class="${index.index==0?'session movieHidden movieShow':'session movieHidden'}"
                 th:each="movieTheatreShow,index:${cinemasDetailShowVo.movieTheatreShows}">
                <ul>
                    <li>
                        <span>放映时间</span>
                        <span>语言版本</span>
                        <span>放映厅</span>
                        <span style="color: rgb(58, 58, 58);">售价(元)</span>
                        <span>购票选座</span>
                    </li>
                    <li th:each="movieShow:${movieTheatreShow.getValue()}">
                        <span>[[${#dates.format(movieShow.startDate,'HH:mm')}]]
                            <span style="font-size: 10px;position: relative;top: -40px;color:#999"
                                  th:text="${#dates.format(movieShow.endDate,'HH:mm')+'散场'}"></span>
                        </span>
                        <span style="position: relative;left: -30px" th:text="${movieShow.languageVersion}">日语2D1</span>
                        <span style="position: relative;left: -40px" th:text="${movieShow.videoHall}">5号激光厅</span>
                        <span style="position: relative;left: -80px" th:text="${'￥'+movieShow.price}">￥66</span>
                        <span style="position: relative;left: -50px;top: 10px;" class="btn" th:onclick="jump([[${cinemasDetailShowVo.cinemasMovieVo.id+''}]],[[${movieShow.id+''}]],[[${movieTheatre.id+''}]])">购票选座</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>
</div>
<!-- 页面底部 -->
<div th:replace="common/bottom::#bottom"></div>


<script src="/static/js/ajax.js"></script>
<script src="/static/js/mock-min.js"></script>
<script src="/static/js/server.js"></script>

<script  th:inline="javascript">
    $(function () {
        //电影放映表切换 日期切换
        $(".movieShowDate>li").click(function () {
            //移除当前的li的所有兄弟元素li的类样式
            $(this).parent("ul").find("li").removeClass("activeli");
            //让当前li添加类样式
            $(this).addClass("activeli");
            //获取当前的li的索引
            var index = $(this).index();
            //获取div中对应的索引的这个div,让这个div的所有的兄弟元素div全部移除selected类样式,让当前对应的div(索引对应)应用selected类样式
            $(".movieShowTable.movieShow>div:eq(" + (index + 1) + ")").siblings("div").removeClass("movieShow");
            //当前对应的div添加类样式
            $(".movieShowTable.movieShow>div:eq(" + (index + 1) + ")").addClass("movieShow");
        });

        //电影放映表切换  图片切换
        $("#moviePreviewImage>li").click(function () {
            //移除当前的li的所有兄弟元素li的类样式
            $(this).siblings("li").removeClass("activeimg");
            //让当前li添加类样式
            $(this).addClass("activeimg");
            //获取当前的li的索引
            var index = $(this).index();
            //获取div中对应的索引的这个div,让这个div的所有的兄弟元素div全部移除selected类样式,让当前对应的div(索引对应)应用selected类样式
            $(".movieShowTable:eq(" + index + ")").siblings("div").removeClass("movieShow");
            //当前对应的div添加类样式
            $(".movieShowTable:eq(" + index + ")").addClass("movieShow");
        });

        //判断排片时间是否过期
        var startState=[[${startState}]]
        if (startState==0){
            alert("该影片以放映 请选择其他影片")
        }

    })

    function jump(movieId, movieShowId,movieTheatreId) {
        location.href = "/movie/order/selectionSeat?movieId="+movieId+"&movieShowId="+movieShowId+"&movieTheatreId="+movieTheatreId;
    }



</script>
</body>

</html>